<!--
    This is what the embed iframe src links to. It doesn't need to communicate with the parent page, only fill the available space and look for #? parameters
-->

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link rel="icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="uv.css" />
    <script type="text/javascript" src="umd/UV.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="uv" class="uv"></div>

    <script>
      document.addEventListener("DOMContentLoaded", function() {
        var urlAdapter = new UV.IIIFURLAdapter(true);

        const data = urlAdapter.getInitialData({
          embedded: true,
        });

        uv = UV.init("uv", data);


        const configUrl = urlAdapter.get('config');
        if (configUrl) {
          uv.on("configure", function({ config, cb }) {
            cb(
              new Promise(function (resolve) {
                fetch(configUrl).then(function (response) {
                  resolve(response.json());
                });
              })
            );
          })
        }

        var $UV = document.getElementById("uv");

        function resize() {
          $UV.setAttribute("style", "width:" + window.innerWidth + "px");
          $UV.setAttribute("style", "height:" + window.innerHeight + "px");
        }

        addEventListener("resize", function() {
          resize();
        });

        resize();
      });
    </script>
  </body>
</html>
